<template>
  <div class="page">
 <h4 style="margin-left: 3px">基本信息筛选</h4>
          <el-row :gutter="20">
            <el-form
              id="formbox"
              ref="formInline"
              :inline="true"
              :model="formInline"
            >
              <el-col :span="8" class="mb20">
                <el-form-item label="医生姓名 :" prop="name">
                  <el-input
                    clearable
                    v-model="formInline.name"
                    placeholder="请输入医生姓名"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="mb20">
                <el-form-item label="随访医生 :" prop="followName">
                  <el-input
                    clearable
                    v-model="formInline.followName"
                    placeholder="请输入随访医生"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" class="mb20">
                <el-form-item label="创建人 :" prop="inputPerson">
                  <el-input
                    clearable
                    v-model="formInline.inputPerson"
                    placeholder="请输入创建人"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8" class="mb20">
                <el-form-item label="创建时间 :" prop="testDate">
                  <el-date-picker
                  :disabled-date="disableFutureDates"
                    v-model="formInline.testDate"
                    type="daterange"
                    value-format="YYYY-MM-DD"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    size="large"
                  />
                </el-form-item>
              </el-col>
             
              <el-col :span="16" class="form-button">
                <el-form-item>
                  <el-button type="primary" @click="getList()">查询</el-button>
                  <el-button @click="onReset('formInline')">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div class="table-container">
            <el-col :span="24"
              ><h4>随访医生列表 (共{{ total }}条)</h4></el-col
            >
            <el-col :span="24" style="display: flex">
              <el-col :span="4">
                <div class="table-btn">
                  <div>
                    <el-checkbox
                      @change="checkedAllChange"
                      v-model="checkedAll"
                      :label="'全选'"
                      :disabled="tableData.length == 0"
                    />
                  </div>
                  <div style="margin-right: 10px">
                    <label
                      >已选择<el-text type="primary">{{
                        checkedAll == true
                          ? selectionCount
                          : multipleSelection.length
                      }}</el-text
                      >条</label
                    >
                  </div>
                </div>
              </el-col>
              <el-col :span="20" class="tr">
              

                <el-button
                  style="width: 87.6px"
                  type="primary"
                  @click="importSelect()"
                  >导入</el-button
                >
                <el-button
                  style="width: 87.6px; color: #fff"
                  type="primary"
                  :disabled="multipleSelection.length === 0"
                  @click="exportSelect()"
                  >导出</el-button
                >
                <el-button
                  style="width: 87.6px"
                  type="primary"
                  @click="addDoctor()"
                  >新增</el-button
                >
                <el-button
                  :disabled="multipleSelection.length === 0"
                 type="danger"
                  @click="testSt()"
                  style="width: 87.6px; color: #fff"
                  >删除</el-button
                >
                <el-button
                  style="width: 87.6px"
                  type="success"
                  @click="exportRecord()"
                  >下载导入模版</el-button
                >
              </el-col>
            </el-col>
          </div>
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            border
            :default-sort="{ prop: 'date', order: 'descending' }"
            style="width: 100%"
            tooltip-effect="light"
            row-key="id"
            @selection-change="handleSelectionChange"
            :header-cell-class-name="setClassName"
            max-height="470px"
          >
            <!-- v-loading="loading" -->
            <el-table-column
              type="selection"
              :reserve-selection="true"
              width="55"
              align="center"
            />
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
              fixed="left"
          
            />
            <el-table-column
              prop="name"
              label="医生姓名"
              align="center"
              show-overflow-tooltip
               fixed="left"
            />
            <el-table-column
              prop="followName"
              label="随访医生"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              prop="inputPerson"
              label="创建人"
              align="center"
             
              show-overflow-tooltip
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
          
              show-overflow-tooltip
            />

            <el-table-column
              show-overflow-tooltip
              label="操作"
              width="140"
              align="center"
              fixed="right"
            >
              <template #default="scope">
                <el-button
                  text=""
                  size="small"
                  type="primary"
                  @click="openEditResidents(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  text=""
                  size="small"
                  type="danger"
                  @click="delFollow(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-col
            :span="24"
            style="display: flex; justify-content: end; margin-bottom: 50px"
          >
            <el-pagination
              v-if="this.total > 0"
              v-model:currentPage="this.page"
              v-model:page-size="this.size"
              :total="this.total"
              :page-sizes="[10, 20, 50, 100, 500]"
              class="new-pagination"
              small
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </el-col>
          
      <EditDialog ref="editDialogRef" :dialogObj="dialogObj"  @changeDrug="handleChangeDD"/>
      <DrugDialog
      ref="drugDialogRef"
      :state="state"
      @changeDrug="handleChangeDD"
     ></DrugDialog>

    </div>

</template>

<script lang="ts">
import http from "@/utils/request";
import { ElMessage } from "element-plus";
import EditDialog from "@/pages/examples/doctor/components/editDialog.vue";
import DrugDialog from "@/pages/examples/doctor/components/drugDialog.vue";
const disableFutureDates = (time) =>  time > new Date();
export default {
  components: {
    EditDialog,
    DrugDialog,
  },
  emits: ["changeDrug"],
  data() {
    return {
      activeName: "first",
      //记录条数
      total: 1,
      //每页条数
      size: 10,
      //当前页码
      page: 1,
      //选择条数
      selectionCount: 0,
      //选择数组
      multipleSelection: [],
      //全选状态
      checkedAll: false,
      dialogObj: {
        //弹窗标题
        editResidentsTitle: "",
        //弹窗是否显示
        isDialogVisible: false,
        DialogDate: {},
      },
      state: {
        dialogUploadVisible: false,
        accept: ".xlsx,.csv",
      },
      //表格数据
      tableData: [
      ],
      ruleform: {
        name: "",
      },
      formInline: {
        //姓名
        name: "",
        //证件号码
        followName: "",
        //录入人
        inputPerson: "",
        //检验日期
        testDate: "",
        startTime: "",
        endTime: "",
        //导入日期
      },
    };
  },
  methods: {
    disableFutureDates,
    handleChangeDD(newValue, oldValue) {
      console.log("newValue", newValue);
      this.state.dialogUploadVisible = newValue;
      this.getList();
    },
    addDoctor(){
      this.dialogObj.editResidentsTitle = "新增随访医生";
      this.dialogObj.isDialogVisible = true;
    },
    //文件上传成功处理
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      console.log("上传成功", response);
      this.fileList = fileList;
    },
    getTodayRange() {
      const today = new Date();
      const formatDate = (date) => {
        const y = date.getFullYear();
        const m = (date.getMonth() + 1).toString().padStart(2, "0");
        const d = date.getDate().toString().padStart(2, "0");
        return `${y}-${m}-${d}`;
      };
      const todayStr = formatDate(today);
      console.log(todayStr);

      return [todayStr, todayStr];
    },
    //获取列表
    getList() {
      const requestData = { page: this.page, size: this.size };
      for (const key in this.formInline) {
        if (this.formInline[key]) {
          requestData[key] = this.formInline[key];
        }
      }
      //@ts-ignore
      if (requestData.testDate) {
        //@ts-ignore
        requestData.startTime = requestData.testDate[0];
        //@ts-ignore
        requestData.endTime = requestData.testDate[1];
        //@ts-ignore
        delete requestData.testDate;
      }
      http.post('/doctor/getPageList',requestData).then((res)=>{
        //@ts-ignore
        if(res.code==200){
          this.tableData=res.data.list;
          this.total=res.data.total;
        }
      })
    },
    //重置搜索
    onReset(formName) {
      this.$refs[formName].resetFields();
      this.formInline.testDate = "";
      this.formInline.importDate = "";
      this.page = 1;
    },
    //打开编辑页
    openEditResidents(row) {
     console.log(row);
      this.dialogObj.isDialogVisible = true;
      this.dialogObj.editResidentsTitle = "编辑";
      this.dialogObj.DialogDate = row;
    },
    //删除随访
    delFollow(row) {
      const idList = [row.id];
      this.$confirm(`确定删除${row.name}医生吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/doctor/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.getList();
              this.$refs.multipleTableRef!.clearSelection();
              //@ts-ignore
             
            } 
          });
        })
        .catch(() => {});
    },
    // 改变页面容量
    handleSizeChange(val: number) {
      this.size = val;
      this.getList();
    },

    // 改变页码序号
    handleCurrentChange(val: number) {
      this.page = val;
      this.getList();
    },
    checkSelectable() {
      return this.checkedAll != true;
    },
    checkedAllChange() {
      if (this.checkedAll == true) {
        this.selectionCount = this.tableData.length;
        console.log(this.selectionCount);

        this.tableData.forEach((row: any) => {
          this.$refs.multipleTableRef!.toggleRowSelection(row, true);
        });
      } else {
        this.selectionCount = 0;
        this.$refs.multipleTableRef!.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if(val.length==this.total||val.length==this.size){
        this.checkedAll = true;
        this.selectionCount=val.length;
      }else{
        this.checkedAll = false;
        this.selectionCount=0;
      }  

      // console.log("val",val);
      // if(multipleSelection.value.length==0){
      //   checkedAll.value=false;
      // }
    },
    setClassName({ column }) {
      return this.checkedAll == true ? "all-disabled" : "";
    },
    
    exportRecord() {
      http.post("/doctor/initializeExcelTemplate").then((res) => {
        //@ts-ignore
        if (res.code == 200) {
            //@ts-ignore
            window.open(res.data);
          //@ts-ignore
           ElMessage.success(res.message);;
        } else {
        }
      });
    },
    //导入
    importSelect() {
      this.state.dialogUploadVisible = true;
    },
    //导出
    exportSelect() {
      let idList = this.multipleSelection.map((item) => item.id);
      http.post("/doctor/exportToExcel", idList).then((res) => {
        //@ts-ignore
        if (res.code == 200) {
           //@ts-ignore
          ElMessage.success(res.message);
          this.multipleSelection=[];
          this.checkedAll=false;
          this.$refs.multipleTableRef.clearSelection();
          window.open(res.data);
        }
      });
    },
    //删除
    testSt() {
      const idList = this.multipleSelection.map((item) => item.id);
      this.$confirm("是否确定删除当前已选择的随访（检查）医生吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.post("/doctor/deleteList", idList).then((res) => {
            //@ts-ignore
            if (res.code == 200) {
              //@ts-ignore
              ElMessage.success(res.message);
              this.multipleSelection=[];
              this.getList();
              this.$refs.multipleTableRef!.clearSelection();
            } else {
              //@ts-ignore
              ElMessage.error(res.message);
            }
          });
        })
        .catch(() => {});
    },
  },
  computed: {},
  // onMounted() {
  //   this.getList();
  
  // }
  created() {
    this.getList();
  },
};
</script>
<style scoped>
.page {
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
}

#formbox {
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.upload-demo {
  width: 100%;
  border: 2px dashed #d9d9d9;
  text-align: center;
  padding: 40px 20px;
}
.mb20 {
  /* margin: 0 20px; */
}
:deep(.el-input__wrapper) {
  width: 230px;
}
:deep(.el-form-item .el-select__wrapper) {
  min-height: 32px;
  width: 252px;
}
:deep(.el-range-editor--large.el-input__wrapper) {
  height: 32px;
  width: 232px;
}
.form-button {
  display: flex;
  justify-content: end;
}
.table-container {
  display: flex;
  flex-direction: column;
}
.table-btn {
  display: flex;
  height: 50px;
  align-items: center;
  justify-content: space-around;
}
.tr {
  text-align: right;
  height: 50px;
  line-height: 50px;
}
::v-deep .all-disabled .el-checkbox__input .el-checkbox__inner {
  display: none;
}

.new-pagination {
  margin: 30px 0 10px 0 !important;
}
</style>
